<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        tr, td, th {
            text-align: center;
            height: 50px;
            border: 1px solid #000
        }

        table {
            width: 600px;
            text-align: center;
            margin: 0 auto;
            border: 1px solid #000;
            border-collapse: collapse
        }

        button {
            width: 50px;
            height: 30px;
        }

        span {
            margin: 0 5px;
        }
    </style>
</head>
<body>
<div id="app">

</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    /*表单头部组件*/
    const taoTableThead = {
        template: `
          <thead>
          <tr>
            <th v-for="(title,index) in tableTheadData" :key="index">{{ title }}</th>
          </tr>
          </thead>
        `,
        props: {
            tableTheadData: {
                type: Array,
                required: true
            }
        }
    }
    /*表单身体组件*/
    const taoTableBody = {
        template: `
          <tbody>
          <tr v-for="(book,index) in booksList" :key="book.id">
            <td>{{ book.id }}</td>
            <td>{{ book.name }}</td>
            <td>{{ book.date }}</td>
            <td>{{ book.price }}</td>
            <td>
              <button @click="handler('sub',book.id)" :disabled="book.count<=1">-</button>
              <span>{{ book.count }}</span>
              <button @click="handler('add',book.id)">+</button>
            </td>
            <td>
              <button @click="deleteBook(book.id)">删除</button>
            </td>
          </tr>
          </tbody>
        `,
        props: {
            booksList: {
                type: Array,
                required: true,
            }
        },
        methods: {
            handler(controls, id) {
                controls === "add" ? this.$emit("addBook", id) : this.$emit("subBook", id)
            },
            deleteBook(id) {
                this.$emit("deleteBook", id)
            }
        }
    }
    /*表单脚部组件*/
    const taoTableFooter = {
        template: `
          <tfoot>
          <td :colspan="colspan">书籍的总价格：{{ totalPrice }}</td>
          </tfoot>
        `,
        props: {
            colspan: {
                type: Number,
                default: 1
            },
            totalPrice: {
                type: Number,
                required: true
            }
        }
    }

    const app = Vue.createApp({
        template: `
          <table>
            <tao-table-thead :tableTheadData="tableTheadData"></tao-table-thead>
            <tao-table-body :booksList="booksList" @addBook="addBook" @subBook="subBook" @deleteBook="deleteBook"></tao-table-body>
            <tao-table-footer :colspan="6" :totalPrice="totalPrice"></tao-table-footer>
          </table>
        `,
        data() {
            return {
                tableTheadData: ["序号", "书籍名称", "出版社", "价格", "购买数量", "操作"],
                booksList: [
                    {id: 1, name: "ES6标准入门", date: new Date().toDateString(), price: 100, count: 1},
                    {id: 2, name: "Vue.js设计与实现", date: new Date().toDateString(), price: 100, count: 2},
                    {id: 3, name: "JavaScript高级程序设计", date: new Date().toDateString(), price: 100, count: 3},
                    {id: 4, name: "JavaScript权威指南", date: new Date().toDateString(), price: 100, count: 4},
                ]
            }
        },
        methods: {
            addBook(id) {
                this.booksList.find((book) => book.id === id).count++
            },
            subBook(id) {
                this.booksList.find((book) => book.id === id).count--
            },
            deleteBook(id) {
                this.booksList = this.booksList.filter((item) => item.id !== id)
            }
        },
        computed: {
            totalPrice() {
                return this.booksList.reduce((previousValue, currentValue) => previousValue += currentValue.price * currentValue.count, 0)
            },
        },
        components: {
            taoTableThead,
            taoTableBody,
            taoTableFooter
        }
    })
    app.mount("#app")
</script>
</body>
</html>